<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>分类列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/libs/layui/css/layui.css" rel="stylesheet">
    <script src="/libs/layui/layui.js"></script>
    <script src="/libs/js/jquery.js"></script>
    <script src="/libs/js/axios.js"></script>
</head>

<body>
    <!-- 面包屑导航 -->
    <span class="layui-breadcrumb" lay-separator="/">
        <a href="/">首页</a>
        <a href="javascript:;">新闻管理</a>
        <a href="/cates">分类管理</a>
        <a><cite>分类列表</cite></a>
    </span>
    <div class="layui-card">
        <div class="layui-card-header" style="padding:10px;">
            <button class="layui-btn layui-btn-sm cate-add">
                添加分类
            </button>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="cate-table" lay-filter="test"></table>
            <!-- 工具栏 -->
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                </div>
            </script>
            <!-- 操作的模板 -->
            <script type="text/html" id="op"">
                    <a class=" layui-btn layui-btn-xs" lay-event="edit">
                编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>



    <script>
        layui.use(['table', 'layer'], function () {
            var table = layui.table;
            var layer = layui.layer;
            // 页面加载完成就渲染表格
            renderTable()

            function renderTable() {
                // 创建渲染实例
                table.render({
                    elem: '#cate-table',
                    url: '/catesApi', // 数据接口地址
                    toolbar: '#toolbarDemo',
                    defaultToolbar: ['exports', 'print'],
                    //height: 'full-200', // 最大高度减去其他容器已占有的高度差
                    cellMinWidth: 80,
                    page: true, //开启分页功能
                    limit: 3, // 每页显示的条数
                    limits: [3, 6, 9], // 下拉选项
                    // 表格头部的设置
                    cols: [
                        [{
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                            field: 'id',
                            fixed: 'left',
                            width: 80,
                            title: 'ID',
                            sort: true
                        }, {
                            field: 'cate_name',
                            width: 150,
                            title: '分类名称'
                        }, {
                            field: 'sort',
                            title: '排序',
                            width: 90,
                            edit: 'text' // 该列可编辑
                        }, {
                            fixed: 'right',
                            title: '操作',
                            width: 155,
                            minWidth: 150,
                            toolbar: '#op'
                        }]
                    ],
                    error: function (res, msg) {
                        console.log(res, msg)
                    }
                });
            }
            // 操作：删除、修改
            table.on('tool(test)', function (obj) { // 双击 toolDouble
                var data = obj.data;
                const id = data.id
                if (obj.event === 'del') {
                    layer.confirm('您确定要删除吗?', async function (index) {
                        // 发送ajax请求进行数据的删除
                        const {
                            data: res
                        } = await axios.delete('/cates/' + id)
                        if (res.status !== 200) {
                            return layer.msg('删除失败', {
                                icon: 5,
                                time: 2000
                            })
                        }
                        return layer.msg('删除成功', {
                            icon: 6,
                            time: 1000
                        }, function () {
                            // 进行页面删除
                            obj.del();
                            // 关闭层
                            layer.close(index);
                        })
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        title: '编辑分类',
                        type: 2,
                        area: ['500px', '300px'],
                        content: ['/cate?id=' + id, 'no'],
                        end: function () {
                            // 重新渲染表格
                            renderTable()
                        }
                    });
                }
            });

            // 定义id集合
            var ids = new Set()
            //触发表格复选框选择---可以实现批量删除
            table.on('checkbox(test)', function (obj) {
                if (obj.checked === true) {
                    ids.add(obj.data.id)
                } else {
                    ids.delete(obj.data.id)
                }
                // 把集合转化为数组
                const ids_arr = [...ids]
                console.log(ids_arr);
            });

            // 单元格编辑事件---实现分类排序的即点即改功能
            table.on('edit(test)', async function (obj) {
                var field = obj.field, //得到字段
                    value = obj.value, //得到修改后的
                    id = obj.data.id; //得到所在行所有键值
                // 获取数据修改前的值
                const cate = await axios.get('/cates/getCateById?id=' + id)
                const old_sort = cate.data.data.sort
                // 定义空对象    
                var update = {};
                var reg = /^[1-9]\d?$/
                if (!reg.test(value)) {
                    return layer.msg('排序数字必须是1-99的数字', {
                        icon: 5,
                        time: 2000
                    }, function () {
                        update[field] = old_sort;
                        obj.update(update);
                    })
                }

                // 发送ajax请求实现分类的修改 
                const {
                    data: res
                } = await axios.post('/cates/editSort/' + id, {
                    sort:value
                })
                if (res.status === 200) {
                    layer.msg('修改成功', {
                        icon: 6,
                        time: 1000
                    }, function () {
                        update[field] = value;
                        obj.update(update);
                    })
                } else {
                    return layer.msg('修改失败', {
                        icon: 5,
                        time: 2000
                    }, function () {
                        update[field] = old_sort;
                        obj.update(update);
                    })
                }

            });

            // 点击添加按钮打开添加分类的层
            $('.cate-add').click(function () {
                layer.open({
                    type: 2,
                    title: '分类添加',
                    content: ['/cates/add', 'no'],
                    area: ['500px', '300px'],
                    end: function () {
                        // 重新渲染表格
                        renderTable()
                    }
                })
            })
            // 结束
        });
    </script>

</body>

</html>